import { Button, ButtonGroup, Card, Space, Tooltip } from '@douyinfe/semi-ui';
import { IconSettingStroked, IconArrowUpLeft } from '@douyinfe/semi-icons';
import { useEffect, useMemo } from 'react';
import { usePageContext } from './context';
import ApplicationFilter from './filter';
import ApplicationTable from './table/table';
import { useDispatch } from 'react-redux';
import { fetchItems } from '@/redux/application/application-actions';
import { useNavigate } from 'react-router-dom';

const ApplicationCard = () => {
  const navigate = useNavigate();

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
    };
  }, [PageContext]);

  const dispatch = useDispatch<any>();
  useEffect(() => {
    dispatch(fetchItems(PageAction.queryParams)).then((res: any) => {
      console.log(res);
    });
  }, [PageAction.queryParams]);

  return (
    <div className='flex flex-col gap-y-4 flex-1'>
      <Card
        bordered={false}
        className='shadow-2xl z-[1]'
        title={
          <Space>
            <ButtonGroup>
              <Button>应用列表</Button>
            </ButtonGroup>
          </Space>
        }
        headerExtraContent={
          <Space>
            <Button
              icon={<IconSettingStroked />}
              onClick={() => PageContext.setShowFloater(true)}></Button>
            <Button onClick={PageAction.addRecord}>新建</Button>
          </Space>
        }>
        <ApplicationFilter />
      </Card>
      <Card bordered={false}>
        <ApplicationTable />
      </Card>
    </div>
  );
};

export default ApplicationCard;
